<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器练习</title>
</head>
<body>
    <input type="text" id="i1" placeholder="请输入数字1"><br>
    <input type="text" id="i2" placeholder="请输入数字2"><br>
    <button onclick="calc('+')">加</button>
    <button onclick="calc('-')">减</button>
    <button onclick="calc('*')">乘</button>
    <button onclick="calc('/')">除</button>
    <h1>运算结果：<span class="result" style="font-weight: lighter;font-size: 20px"></span></h1>


    <script>
        function calc(o){
            let input1 = document.querySelector('#i1');
            let input2 = document.querySelector('#i2');

            let num1 = parseFloat(input1.value);
            let num2 = parseFloat(input2.value);

            let result = document.querySelector('.result');
            switch (o){
                case '+':
                    result.innerHTML = num1+num2;break;
                case '-':
                    result.innerHTML = num1-num2;break;
                case '*':
                    result.innerHTML = num1*num2;break;
                case '/':
                    if (num2===0){
                        alert('除数不能为0');
                    }else {
                        result.innerHTML = num1/num2;
                    }

            }
        }
    </script>

</body>
</html>